<template>
  <div>
    <el-page-header @back="goBack" content="详情页面"></el-page-header>
    <el-header>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basicInfo"></el-tab-pane>
        <el-tab-pane label="家庭成员" name="familyMembers"></el-tab-pane>
      </el-tabs>
    </el-header>
    <el-main>
      <el-descriptions border v-if="activeTab === 'basicInfo'">
        <el-descriptions-item label="真实姓名">
          <span>{{ basicInfo.realName }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="身份证号">
          <span>{{ basicInfo.idCard }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="出生年月">
          <span>{{ basicInfo.birthDate }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="手机号">
          <span>{{ basicInfo.phone }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="身份证">
          <el-image :src="basicInfo.idUpload" style="width: 100px; height: 100px;"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="户口本">
          <el-image :src="basicInfo.hukouUpload" style="width: 100px; height: 100px;"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="职业">
          <span>{{ basicInfo.occupation }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="工作单位">
          <span>{{ basicInfo.workUnit }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="上一年度的家庭全部收入">
          <span>{{ basicInfo.annualIncome }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="家庭人数">
          <span>{{ basicInfo.familySize }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="保障对象类型">
          <span>{{ basicInfo.protectionType }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="本市家庭人均住房面积（平方米）">
          <span>{{ basicInfo.housingArea }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="学历">
          <span>{{ basicInfo.education }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="毕业证书">
          <el-image :src="basicInfo.graduationCertificate" style="width: 100px; height: 100px;"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="申请的公租房区域">
          <span>{{ basicInfo.requestedArea }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注信息">
          <span>{{ basicInfo.remarks }}</span>
        </el-descriptions-item>
      </el-descriptions>
      <div v-if="activeTab === 'familyMembers'">
        <el-table :data="familyMembers" ref="familyTable">
          <el-table-column prop="realName" label="真实姓名">
            <template slot-scope="scope">
              <span>{{ scope.row.realName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="idCard" label="身份证号">
            <template slot-scope="scope">
              <span>{{ scope.row.idCard }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="birthDate" label="出生年月">
            <template slot-scope="scope">
              <span>{{ scope.row.birthDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="idUpload" label="身份证">
            <template slot-scope="scope">
              <el-image :src="scope.row.idUpload" style="width: 100px; height: 100px;"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="hukouUpload" label="户口本">
            <template slot-scope="scope">
              <el-image :src="scope.row.hukouUpload" style="width: 100px; height: 100px;"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="occupation" label="职业">
            <template slot-scope="scope">
              <span>{{ scope.row.occupation }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="relationship" label="与申请本人的关系">
            <template slot-scope="scope">
              <span>{{ scope.row.relationship }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <p>确定拒绝该申请吗？请输入拒绝理由：</p>
      <el-input v-model="rejectReason" placeholder="请输入拒绝理由"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRejectConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-button @click="handleAgree" v-if="basicInfo.status === '未审核'" type="primary">同意</el-button>
    <el-button @click="handleReject" v-if="basicInfo.status === '未审核'" type="danger">拒绝</el-button>
    <el-button v-else type="danger">撤销同意</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      activeTab: "basicInfo",
      basicInfo: {},
      familyMembers: [],
      rejectReason: ""
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getInfo() {
      this.$axios
        .post("tenant/getInfo", {
          account: this.$store.state.auditDetail.tenant
        })
        .then(res => {
          if (res.data.code === 200) {
            this.basicInfo = res.data.data.tenantInfoList[0];
            this.familyMembers = res.data.data.tenantFamilyList;
          }
        });
    },
    handleAgree() {
      this.$confirm("确定同意该申请吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.basicInfo.status = "已审核";
          this.sendAuditRequest([this.basicInfo]);
        })
        .catch(() => {});
    },
    handleReject() {
      this.dialogVisible = true;
    },
    handleRejectConfirm() {
      this.dialogVisible = false;
      this.basicInfo.status = "保存";
      if (this.rejectReason) {
        this.sendAuditRequest([this.basicInfo]);
      } else {
        this.$message.error("请输入拒绝理由");
      }
    },
    sendAuditRequest(data) {
      this.$axios
        .post("audit/audit", data)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("操作成功");
            this.search();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    }
  }
};
</script>

<style>
</style>